/*
栅格系统（浮动版）
*/

/* 手机（ 移动优先 ） */

.vm {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.hm {
  position: relative;
  left: 50%;
  transform: translateX(-70%);
}

.container {
  padding-left: 15px;
  padding-right: 15px;
}
.row{
  margin-left: -15px;
  margin-right: -15px;
}

.row::after{
  display: block;
  content: " ";
  clear: both;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

.row > div{
  width: 100%;
}

.row > [class *= "col-"]{
  float: left;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

.row > .col-xs-1{
  width: 8.33333333%;
}

.row > .col-xs-2{
  width: 16.66666667%;
}

.row > .col-xs-2dot4{
  width: 20%;
}

.row > .col-xs-3{
  width: 25%;
}

.row > .col-xs-4{
  width: 33.33333333%;
}

.row > .col-xs-5{
  width: 41.66666667%;
}

.row > .col-xs-6{
  width: 50%;
}

.row > .col-xs-7{
  width: 58.33333333%;
}

.row > .col-xs-8{
  width: 66.66666667%;
}

.row > .col-xs-9{
  width: 75%;
}

.row > .col-xs-10{
  width: 83.33333333%;
}

.row > .col-xs-11{
  width: 91.66666667%;
}

.row > .col-xs-12{
  width: 100%;
}

[class *= 'show-'] {
  display: none;
}

@media screen and ( max-width: 768px ) {
  .hidden-xs {
    display: none;
  }
  .show-xs-inline {
    display: inline;
  }
  .show-xs-block {
    display: block;
  }
  .show-xs-inline-block {
    display: inline-block;
  }
}

/* 平板 */
@media screen and ( min-width: 768px ){

  .container{
    width: 750px;
    margin-left: auto;
    margin-right: auto;
  }

  .row > .col-sm-1{
    width: 8.33333333%;
  }
  
  .row > .col-sm-2{
    width: 16.66666667%;
  }

  .row > .col-sm-2dot4{
    width: 20%;
  }

  .row > .col-sm-3{
    width: 25%;
  }
  
  .row > .col-sm-4{
    width: 33.33333333%;
  }
  
  .row > .col-sm-5{
    width: 41.66666667%;
  }
  
  .row > .col-sm-6{
    width: 50%;
  }
  
  .row > .col-sm-7{
    width: 58.33333333%;
  }
  
  .row > .col-sm-8{
    width: 66.66666667%;
  }
  
  .row > .col-sm-9{
    width: 75%;
  }
  
  .row > .col-sm-10{
    width: 83.33333333%;
  }
  
  .row > .col-sm-11{
    width: 91.66666667%;
  }
  
  .row > .col-sm-12{
    width: 100%;
  }

  .hidden-sm {
    display: none;
  }

  .show-sm-inline {
    display: inline;
  }
  .show-sm-block {
    display: block;
  }
  .show-sm-inline-block {
    display: inline-block;
  }

}

/* 中等屏幕 */
@media screen and ( min-width: 992px ){

  .container {
    width: 970px;
  }

  .row > .col-md-1{
    width: 8.33333333%;
  }
  
  .row > .col-md-2{
    width: 16.66666667%;
  }

  .row > .col-md-2dot4{
    width: 20%;
  }

  .row > .col-md-3{
    width: 25%;
  }
  
  .row > .col-md-4{
    width: 33.33333333%;
  }
  
  .row > .col-md-5{
    width: 41.66666667%;
  }
  
  .row > .col-md-6{
    width: 50%;
  }
  
  .row > .col-md-7{
    width: 58.33333333%;
  }
  
  .row > .col-md-8{
    width: 66.66666667%;
  }
  
  .row > .col-md-9{
    width: 75%;
  }
  
  .row > .col-md-10{
    width: 83.33333333%;
  }
  
  .row > .col-md-11{
    width: 91.66666667%;
  }
  
  .row > .col-md-12{
    width: 100%;
  }

  .hidden-md {
    display: none;
  }

  .show-md-inline {
    display: inline;
  }
  .show-md-block {
    display: block;
  }
  .show-md-inline-block {
    display: inline-block;
  }

}

/* 大型屏幕 */
@media screen and ( min-width: 1200px ){

  .container {
    width: 1170px;
  }

  .row > .col-lg-1{
    width: 8.33333333%;
  }
  
  .row > .col-lg-2{
    width: 16.66666667%;
  }

  .row > .col-lg-2dot4{
    width: 20%;
  }

  .row > .col-lg-3{
    width: 25%;
  }
  
  .row > .col-lg-4{
    width: 33.33333333%;
  }
  
  .row > .col-lg-5{
    width: 41.66666667%;
  }
  
  .row > .col-lg-6{
    width: 50%;
  }
  
  .row > .col-lg-7{
    width: 58.33333333%;
  }
  
  .row > .col-lg-8{
    width: 66.66666667%;
  }
  
  .row > .col-lg-9{
    width: 75%;
  }
  
  .row > .col-lg-10{
    width: 83.33333333%;
  }
  
  .row > .col-lg-11{
    width: 91.66666667%;
  }
  
  .row > .col-lg-12{
    width: 100%;
  }

  .hidden-lg {
    display: none;
  }

  .show-lg-inline {
    display: inline;
  }
  .show-lg-block {
    display: block;
  }
  .show-lg-inline-block {
    display: inline-block;
  }

}

@media screen and (max-width: 1024px) {
  
  .top {
    height: 55px;
  }

  .hidden-s {
    display: none;
  }

  .show-s-inline {
    display: inline;
  }
  .show-s-block {
    display: block;
  }
  .show-s-inline-block {
    display: inline-block;
  }

}

@media screen and (min-width: 1024px) {
  
  .top {
    height: 66px;
  }

  .hidden-b {
    display: none;
  }

  .show-b-inline {
    display: inline;
  }
  .show-b-block {
    display: block;
  }
  .show-b-inline-block {
    display: inline-block;
  }

}
